//  走进孚地
<template>
  <div class="GotoFudi" ref="GotoFudi">
    <nav-login></nav-login>
    <home-seach></home-seach>
    <goods-nav :navindex="navindex"></goods-nav>
    
    <div class="banner animated zoomIn"></div>

    <div class="aboutFudi">
      <div class="w1200">
        <h1>关于孚地卖场</h1>
        <p>about us</p>
        <i class="minLine"></i>
        <ul>
          <li
            v-for="(item,index) in lists"
            :key="index"
            @mouseover.prevent="changesBlack(index)"
            @mouseout.prevent="changesBlue(index)"
          >
            <p
              ref="myTransition"
              class="sixcolor"
              :style=" !item.sixBgOver 
                            ? 
                            { background : `url( ${ sixBlue } ) 50% 0px no-repeat`} 
                            : 
                            { background : `url( ${ sixBlack } ) 50% 0px no-repeat`} 
                        "
            >
              <span v-html="item.name"></span>
            </p>
            <div class="text" v-html="item.text"></div>
          </li>
        </ul>
      </div>
    </div>

    <div class="mapchina"></div>

    <div class="ProductIntroduction">
      <div class="w1200">
        <h1>产品介绍</h1>
        <p>PRODUCTS</p>
        <i class="minLine"></i>
        <ol>
          <li v-for=" item in goodList " :key="item.id">
            <div>
              <img :src="item.imgsrc" alt>
            </div>
            <p>{{ item.des }}</p>
          </li>
        </ol>

        <ol class="ol1">
          <li v-for=" item in goodListBottom " :key="item.id">
            <div>
              <img :src="item.imgsrc" alt>
            </div>
            <p>{{ item.des }}</p>
          </li>
        </ol>
        <p
          class="describle"
        >　　为满足客户一站式简单采购，价格优惠透明化，孚地卖场整合优质资源，含机械标准零件、气动、液压元件、电器类、五金类、工具类、刀具辅具磨具类等多个产品线，超低价全国供货，有效提高企业采购效率，保障企业采购服务！</p>
      </div>
    </div>

    <div class="CooperativePartner"></div>
    <home-footer></home-footer>
    <!-- <div class="contentInfo"></div> -->
    <el-backtop>
      <div
        style="{
          height: 100%;
          width: 100%;
          background-color: #f2f5f6;
          box-shadow: 0 0 6px rgba(0,0,0, .12);
          text-align: center;
          line-height: 40px;
          color: #1989fa;
        }"
      >
        UP
      </div>
    </el-backtop> 

  </div>
</template>

<script>

import sixBlue from "@/assets/images/sixBlue.png" // 引过来的图片
import sixBlack from "@/assets/images/sixBlack.png" // 引过来的图片
import pic01 from "@/assets/goFuDi/pic01.png"
import pic02 from "@/assets/goFuDi/pic02.png"
import pic03 from "@/assets/goFuDi/pic03.png"
import pic04 from "@/assets/goFuDi/pic04.png"
import pic05 from "@/assets/goFuDi/pic05.png"
import pic06 from "@/assets/goFuDi/pic06.png"
import pic07 from "@/assets/goFuDi/pic07.png"
import pic08 from "@/assets/goFuDi/pic08.png"
import pic09 from "@/assets/goFuDi/pic09.png"
import pic10 from "@/assets/goFuDi/pic10.png"
import footer from "../globalComponents/Footer"
export default {
  name: "GotoFudi",

  data() {
    return {
      navindex: 1,
      sixBlack,
      sixBlue,
      lists: [
        {
          name: "<span>抄 底 <br>2-8折</span>",
          id: 0,
          sixBgOver: false,
          text: "<p>全场 2 折起 <br>降低采购成本</p>"
        },
        {
          name: "<span>24 h <br>闪电发货</span>",
          id: 1,
          sixBgOver: false,
          text: "<p>平台商品全部准现货 <br>0等待 短交期</p>"
        },
        {
          name: "<span>品类全<br>质保障</span>",
          id: 2,
          sixBgOver: false,
          text: "<p>SKU数量超10万<br>满足一站式采购需求</p>"
        },
        {
          name: "<span>秒速<br>送达</span>",
          id: 3,
          sixBgOver: false,
          text: "<p>极速物流<br>服务布局全国<br>多仓直发<p>"
        },
        {
          name: "<span>无理由<br>退货</span>",
          id: 4,
          sixBgOver: false,
          text: "<p>我们承诺15日<br>无理由退货专业售后服务<br>保障您退换无忧</p>"
        }
      ],
      goodListBottom: [
        {
          imgsrc: pic06,
          id: 0,
          des: "刀具、辅具、磨具类"
        },
        {
          imgsrc: pic07,
          id: 1,
          des: "化学品类"
        },
        {
          imgsrc: pic08,
          id: 2,
          des: "量具类"
        },
        {
          imgsrc: pic09,
          id: 3,
          des: "监控及PC辅件备件"
        },
        {
          imgsrc: pic10,
          id: 4,
          des: "办公类"
        }
      ],
      goodList: [
        {
          imgsrc: pic01,
          id: 0,
          des: "机械标准零件"
        },
        {
          imgsrc: pic02,
          id: 1,
          des: "气动、液压元件"
        },
        {
          imgsrc: pic03,
          id: 2,
          des: "电气类"
        },
        {
          imgsrc: pic04,
          id: 3,
          des: "五金类"
        },
        {
          imgsrc: pic05,
          id: 4,
          des: "工具类"
        }
      ]
    }
  },

  methods: {

    jumphome() {
      this.$router.push("/")
    },

    scrollPosition() {
      let _myPosition = this.$route.params.myPosition
      switch (_myPosition) {
        case 1:
          this.$nextTick(() => {
            document.documentElement.scrollTop = 1002 + 39 + 108 + 38
          })
          break
        case 2:
          this.$nextTick(() => {
            document.documentElement.scrollTop = 1592 + 39 + 108 + 38
          })
          break
        case 3:
          this.$nextTick(() => {
            document.documentElement.scrollTop = 2351 + 39 + 108 + 38
          })
          break
        case 4:
          this.$nextTick(() => {
            document.documentElement.scrollTop = 3302 + 39 + 108 + 38 
          })
          break
        default:
          this.$nextTick(() => {
            document.documentElement.scrollTop = 0
          })
      }
    },

    changesBlack(index) {
      this.$refs.myTransition[index].style.transition = 'all 0.5s ease-out'
      this.lists[index].sixBgOver = true
    },
    changesBlue(index) {
      this.$refs.myTransition[index].style.transition = 'all 0.5s ease-out'
      this.lists[index].sixBgOver = false
    }
  },
  // 用来检测当前页面的点击事件的刷新的
  watch: {
    $route(to, from) {
      this.scrollPosition()
    }
  },
  created() {
    this.scrollPosition()
  },
  // 测试
  mounted() {

  },
  deactivated() {
    document.removeEventListener("scroll", this.scrollActive)
  }
}
</script>
<style lang="scss" scoped>
.GotoFudi {
  .banner {
    height: 1002px;
    background: url('~@/assets/images/pic01.png') 50% 0 no-repeat;
    .w1200 {
      width: 1200px;
      height: 1002px;
      margin: auto;
      color: #fff;
      position: relative;
      img {
        position: absolute;
        top: 40px;
        left: 0px;
      }
    }
  }

  .aboutFudi {
    height: 590px;
    background: url('~@/assets/images/pic02.png') 50% 0 no-repeat;
    .w1200 {
      width: 1200px;
      margin: auto;
      h1 {
        font-size: 40px;
        line-height: 56px;
        padding-top: 68px;
      }
      p {
        font-size: 20px;
        line-height: 40px;
      }
      .minLine {
        display: block;
        width: 30px;
        height: 4px;
        background: #000;
        margin-top: 15px;
      }
      ul {
        margin-top: 31px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        li {
          width: 180px;
          .sixcolor {
            width: 180px;
            height: 187px;
            font-size: 30px;
            color: #fff;
            font-weight: bold;
            span {
              display: block;
              width: 120px;
              text-align: center;
              margin: auto;
              padding-top: 54px;
            }
          }
          .text {
            width:100%;
            padding: 20px 0px;
            line-height: 24px;
            font-size: 16px;
            text-align: center;
          }
        }
      }
    }
  }

  .mapchina {
    height: 758px;
    background: url('~@/assets/images/pic03.png') 50% 0 no-repeat;
  }

  .ProductIntroduction {
    background: url('~@/assets/images/pic04.png') 50% 0 no-repeat;
    height: 952px;
    .w1200 {
      width: 1200px;
      margin: auto;
      h1 {
        font-size: 40px;
        line-height: 56px;
        padding-top: 68px;
      }
      p {
        text-transform: uppercase;
        font-size: 20px;
        line-height: 40px;
      }
      .minLine {
        display: block;
        width: 30px;
        height: 4px;
        background: rgb(92, 91, 91);
        margin-top: 15px;
      }
      .describle {
        color: #fff;
        font-size: 16px;
        line-height: 24px;
        padding-top: 30px;
        text-indent: 32px;
      }
      ol {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        li {
          width: 210px;
          height: 248px;
          background-color: #fff;
          border-radius: 10px;
          overflow: hidden;
          margin-bottom: 42px;
          margin-top: 40px;
          div {
            width: 210px;
            height: 210px;
            box-sizing: border-box;
            img {
              width: 130px;
              height: 130px;
              margin-left: 40px;
              margin-top: 40px;
            }
          }

          p {
            background-color: #000;
            color: #fff;
            font-size: 16px;
            font-weight: bold;
            text-align: center;
            line-height: 38px;
          }
        }
      }
      .ol1 {
        margin-top: 0px;
        li {
          margin-top: 0px;
          p {
            background-color: #ff9000;
          }
        }
      }
    }
  }

  .CooperativePartner {
    height: 760px;
    background: url('~@/assets/images/pic05.png') 50% 0 no-repeat;
  }
  // .contentInfo{
  //   width: 100%;
  //   height: 312px;
  //   background-color: rgb(17,16,16);
  // }
}
</style>


